<template>
  <div class="databox">
    <div class="echartbox">
      <useInitChart :options="chartOptions"/>
    </div>
    <div class="message">
      <div class="fontTitle">动态安全监测</div>
      <div class="msgbox" v-for="item in 10">
        <div>立柱脱空</div>
        <div>异常：2022年03月12日 12:00:33</div>
      </div>
    </div>
    <div class="weath">
      <div class="weath">
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, onMounted, ref } from 'vue';
import useInitChart from '@/components/echarts/useInitChart.vue'
const chartOptions = ref({
  title:{
    subtext: '静态安全监测',
    subtextStyle:{
      color:'#fff'
    }
  },
  legend:{
    type:'plain',
    top:'3%',
    right:'0%',
    textStyle:{
      color:'#fff'
    },
    itemHeight: 10,
    itemWidth: 10,
  },
  grid:{
    top:'20%',
    bottom:'10%',
    left:'18%'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine:{
      lineStyle:{
        color:"#fff",
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine:{
      lineStyle:{
        color:"#fff",
      }
    }
  },
  series: [
  {
      name: '2011',
      type: 'bar',
      itemStyle:{
        color:'#00FFDC'
      },
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      itemStyle:{
        color:'#04F5F6'
      },
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
})
</script>

<style lang='scss' scoped>
.databox{
  width: 100%;
  height: 100%;
  .echartbox,.message,.weath{
    width: 100%;
  }
  .echartbox,.message{
    border-bottom: 1px solid #FFFFFF;
  }
  .echartbox{
    height: 35%;
  }
  .message{
    height: 40%;
    overflow: hidden;
    .msgbox{
      height: 64px;
      margin-bottom: 12px;
      div:nth-child(1),div:nth-child(2){
        height: 32px;
        line-height: 32px;
        padding: 0 11px;
        color: #fff;
        font-size: 14px;
      }
      div:nth-child(1){
        background: #ffffff25;
      }
      div:nth-child(2){
        background-color: #00FFDC25;
      }
    }
  }
  .weath{
    height: 25%;
  }
}
</style>
